<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{
            width: 80px;
            height: 30px;
            margin-left: 10px;
        }
    </style>

    <script>

        function initCity(){
            var province = document.getElementById("province").value;
            var city = {
                "hn":["长沙市","株洲市","湘潭市","衡阳市","邵阳市","岳阳市","常德市","张家界市","益阳市","娄底市","郴州市","永州市","怀化市"],
                "gd":["广州市","深圳市","珠海市","汕头市","佛山市","韶关市","湛江市","肇庆市","江门市","茂名市","惠州市"],
                "hb":["武汉市","黄石市","襄阳市","荆州市","宜昌市","十堰市","孝感市","荆门市","鄂州市","黄冈市","咸宁市","随州市"]
            };
            var values = city[province];
            document.getElementById("city").innerHTML = "";
            for (var i = 0; i < values.length; i++) {
                var option = document.createElement("option");
                option.value = values[i];
                option.innerHTML = values[i];
                document.getElementById("city").appendChild(option);
            }
        }

        window.onload = function (){
            initCity()
        }
    </script>
</head>
<body>
<select id="province" onchange="initCity()">
    <option value="gd">广东</option>
    <option value="hn">湖南省</option>
    <option value="hb">湖北省</option>
</select>
<select id="city">
</select>市
</body>
</html>